<template>
  <div>
    <div class="main">
      <div class="part1">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active" v-for="(item,index) in PData.pic" :key="index">
              <img :src="item" class="d-block w-100" alt="..." />
            </div>
          </div>
          <button
            class="carousel-control-prev"
            type="button"
            data-bs-target="#carouselExampleFade"
            data-bs-slide="prev"
          >
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button
            class="carousel-control-next"
            type="button"
            data-bs-target="#carouselExampleFade"
            data-bs-slide="next"
          >
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
      <div class="part2">
        <h2>{{PData.name}}</h2>
        <h5>{{PData.details}}</h5>
        <h3>￥{{this.price}}K</h3>
        <div class="CSConfigure">
          <H2>选择配置：</H2>
          <div class="FContents">
            <input
              type="radio"
              class="btn-check"
              name="options-outlined"
              id="danger-outlined"
              autocomplete="off"
              @click="hit1()"
            />
            <label class="btn btn-outline-danger" for="danger-outlined" v-if="show">顶级配置</label>

            <input
              type="radio"
              class="btn-check"
              name="options-outlined"
              id="success-outlined"
              autocomplete="off"
              checked
              @click="hit2()"
            />
            <label class="btn btn-outline-success" for="success-outlined">标椎配置</label>

            <input
              type="radio"
              class="btn-check"
              name="options-outlined"
              id="btn-check-outlined"
              autocomplete="off"
              @click="hit3()"
            />
            <label class="btn btn-outline-primary" for="btn-check-outlined" v-if="show">中下配置</label>
          </div>
        </div>
        <div>
          <button type="button" class="btn btn-light" @click="less">-</button>
          <span>{{PData.num}}</span>
          <button type="button" class="btn btn-light" @click="add">+</button>
        </div>
        <button
          type="button"
          class="btn btn-warning"
          style="  width: 200px;margin-top: 30px;"
          @click="goShopCart"
        >加入购物车</button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      price: 99.9,
      PData: {},
      show: true
    };
  },
  mounted() {
    let id = this.$route.query.id;
    let name = this.$route.query.name;
    console.log(this.$route.query.id-1)
    console.log(name);
    axios.get(`https://mock.apifox.cn/m1/1255964-0-default/${name}`
      )
      .then(
        res => (
        console.log(res.data[id-1]),
        this.PData = res.data[id-1].detail,
        this.price = this.PData.price2
        )        
      )
      .catch(function(error) {
        // 请求失败处理
        console.log(error);
      });
      if(name == "parts"){
        this.show = false
      }else{
        this.show = true

      }
  },
  methods: {
    add() {
      if (this.PData.num < 10) {
        this.PData.num++;
      }
    },
    less() {
      if (this.PData.num > 1) {
        this.PData.num--;
      }
    },
    hit1() {
      this.price = this.PData.price3;
    },
    hit2() {
      this.price = this.PData.price2;
    },
    hit3() {
      this.price = this.PData.price1;
    },
    goShopCart() {
      let data = {};
      data.name = this.PData.name;
      data.price = this.price;
      data.pic = this.PData.pic;
      data.num = this.PData.num;
      data.check = false;
      this.$store.state.ProductCart.push(data);
      console.log(data);
      this.$router.push({
        path: "/shopcart",
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  width: 90%;
  height: 600px;
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  .part1 {
    width: 50%;
    height: 400px;
    margin: 80px 80px;
    img {
      width: 100%;
      height: 450px;
      border-radius: 20px;
    }
  }
  .part2 {
    width: 30%;
    height: 550px;
    margin: 50px 50px 50px 0px;
    border-radius: 0px 0px 10px 10px;
    border: 1px solid #000000;
    h1 {
      margin: 10px;
    }
    h2 {
      margin: 20px;
      text-align: start;
    }
    h3 {
      margin: 20px;
      text-align: start;
    }
    h5 {
      margin: 20px;
      text-align: start;
    }
    .CSConfigure {
      width: 100%;
      display: flex;
      justify-content: space-around;
      .FContents {
        width: 40%;
        display: flex;
        flex-direction: column;
        label {
          margin-top: 20px;
        }
      }
    }

    span {
      margin: 0px 20px;
    }

    button {
      margin: 10px 40px;
    }
  }
}
</style>